<template>
  <el-dialog
    :visible.sync="visible"
    :before-close="beforeClose"
    :close-on-click-modal="false"
    append-to-body
    title="权证登记"
    width="900px"
    top="30px"
  >
    <table class="table table-bordered table-vertical-middle" v-loading="loading">
      <colgroup>
        <col width="20%" />
        <col width="30%" />
        <col width="20%" />
        <col width="30%" />
      </colgroup>
      <tr>
        <td>项目名称：</td>
        <td>{{ formData.customer_name }}</td>
        <td>权证数量：</td>
        <td>{{ formData.register_count || '-' }}</td>
      </tr>
      <tr>
        <td>权证状态：</td>
        <td>【{{ enumStatus[status] }}】</td>
        <td>登记人：</td>
        <td>{{ realName }}</td>
      </tr>
      <tr>
        <td>交接人：</td>
        <td class="input-td">
          <select-staff
            v-model="person"
            @select="setPerson"
            class="form-control-ml"
            placeholder="请选择交接人"
          ></select-staff>
        </td>
        <td>操作时间：</td>
        <td class="input-td">
          <el-date-picker
            class="w-100"
            v-model="editData.lend_time"
            type="date"
            placeholder="操作时间"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </td>
      </tr>
      <tr>
        <td>备注说明：</td>
        <td colspan="3" class="input-td">
          <el-input
            v-model="editData.lend_des"
            :autosize="{ minRows: 4, maxRows: 100 }"
            type="textarea"
            placeholder="备注"
          ></el-input>
        </td>
      </tr>
    </table>
    <div class="text-center">
      <el-button type="primary" class="btn-long" :loading="buttonLoading" @click="handleSubmit">
        完成登记
      </el-button>
      <el-button class="btn-long" @click="beforeClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import SelectStaff from '@/components/select/SelectStaff'
import { dateFormat } from '@vimi/utils-tool'
export default {
  components: {
    SelectStaff,
  },
  props: {
    visible: Boolean,
    formData: {
      type: Object,
      default: () => ({}),
    },
    status: {
      type: Number,
      default: 3,
    },
  },
  data() {
    return {
      enumStatus: {
        2: '归还登记',
        3: '借出登记',
        4: '退还登记',
      },
      loading: false,
      buttonLoading: false,
      editData: {},
      tableName: 'lend_register',
      masterTable: 'guaranty_register',
      person: '',
    }
  },

  computed: {
    ...mapGetters(['user']),
    realName() {
      return this.user.realName
    },
  },

  created() {},
  methods: {
    setPerson(user) {
      this.editData.lend_person = user.realName
    },
    handleSubmit() {
      if (!this.formData.guaranty_register_id) {
        return
      }
      this.buttonLoading = true
      this.editData.register_id = this.formData.guaranty_register_id
      this.editData.submit_person_name = this.realName
      const status = {
        2: 2,
        3: 1,
        4: 3,
      }
      this.editData.lend_type = status[this.status]
      const data = {
        transfer_status: this.status,
        latest_lend_time: dateFormat(new Date()),
        latest_lend_person: this.editData.lend_person,
      }
      Promise.all([
        this.$api.addData(this.$serviceName, this.tableName, this.editData),
        this.$api.updateData(
          this.$serviceName,
          this.masterTable,
          this.formData.guaranty_register_id,
          data
        ),
      ])
        .then(() => {
          this.$emit('success', true)
          this.beforeClose()
          this.$message.success('登记成功')
        })
        .catch(() => {
          this.$message.error('登记失败')
        })
        .finally(() => {
          this.buttonLoading = false
        })
    },
    beforeClose() {
      this.editData = {}
      this.person = ''
      this.$emit('update:visible', false)
    },
  },
}
</script>
<style lang="scss" scoped>
.input-td {
  background: #ffffee;
}
</style>
